<template>
  <div ref="barEchart" class="headers"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Headers",
  mounted() {
    let barEchart = echarts.init(this.$refs.barEchart);
    barEchart.setOption({
      xAxis: {
        show: true,
        type: "category",
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        //grid 区域中的分隔线
        axisLine: {
          show: true,
        },
        // 坐标轴标签
        axisLabel: {
          inside: false,
          textStyle: {
            color: "black",
          },
        },
      },
      yAxis: {
        show: true, //是否显示
        // 坐标轴 轴线
        axisLine: {
          show: true,
          // 箭头
          symbol: ["none", "arrow"], //['none','arrow']这是只在末端显示箭头，'arrow'两端都显示箭头 'none'就是不显示
          symbolSize: [8, 8], //---箭头大小
          symbolOffset: [0, 7], //---箭头位置
          //线
          lineStyle: {
            color: "green", //线的颜色
            width: 1, //线的宽度
            type: "solide", //显得类型
          },
        },
        //坐标轴 刻度 就是纵向多出来的小线
        axisTick: {
          show: true,
          inside: false, //---是否朝内
          lengt: 1, //长度
          lineStyle: {
            width: 1,
            type: "solid",
          },
        },
      },
      legend: {
        //根据系列筛选，需要配合series使用
        data: ["在职", "请假", "离职"],
      },
      series: [
        {
          name: "在职",
          type: "bar",
          data: [56, 23, 45, 72, 80, 87, 97, 92, 82, 63, 42, 25],
          barWidth: 23,
        },
        {
          name: "请假",
          type: "bar",
          data: [30, 45, 53, 23, 18, 14, 38, 11, 21, 23, 22, 45],
          barWidth: 23,
        },
        {
          name: "离职",
          type: "bar",
          data: [49, 56, 34, 14, 23, 18, 7, 12, 30, 38, 65, 40],
          barWidth: 23,
        },
      ],
      //用于设置echarts的上下左右界面
      grid: {
        left: 50,
        top: 30,
        right: 50,
        bottom: 30,
      },
      //鼠标放上面显示
      tooltip: {},
      // 数据区域的缩放
    });
  },
};
</script>

<style>
.headers {
  width: 100%;
  height: 100%;
}
</style>